<section>
    <div class="top">
        <!-- 图片展示 -->
        <div>
            <img src="assets/images/d1.jpg">
        </div>
        <!-- 图片导航 -->
        <ul>
            <li>
                <a href="javascript:;">
                    <img src="assets/images/d1.jpg">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="assets/images/d2.jpg">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="assets/images/d4.jpg">
                </a>
            </li>
        </ul>
    </div>

    <!-- 内容 -->
    <div class="top-base">
        <div class="left">
            <p>鲜果奇缘</p>
            <p>￥218.00</p>
            <div>
                <a href="">稀奶油</a>
            </div>
            <p>清新草莓邂逅可爱蓝莓，酸甜升级，撒上果仁碎粒，与柔软蛋糕交织出层叠美味。</p>
        </div>
        <div class="right">
            <a class="collected" href="" title="收藏">
                <i class="icon iconfont iconstar1"></i>
                <span>收藏</span>
            </a>
            <ul>
                <li>
                    <a href="javascript:;">800g(直径17.5cm)</a>
                </li>
            </ul>
            <a href="#">加入购物车</a>
            <a href="">立即购买</a>
        </div>
    </div>

    <div class="sections">
        <div>
            <a [routerLink]="['detail']" routerLinkActive="actived">商品详情</a>
            <a [routerLink]="['comments']" routerLinkActive="actived">商品评价（210条）</a>
        </div>
        <router-outlet></router-outlet>
    </div>
</section>